<template>
    <el-container style="height: 100%">
        <el-main :class="fitContent">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(personalCard, index) in cardsData" :key="index"
                    style="">
                <personal-data-card :personalCard="personalCard" @getPersonal="getPersonalData"
                                    style="margin:20px 19.5%;width: 70%; "></personal-data-card>
            </el-col>
        </el-main>
        <el-footer style="text-align: center;height: 30px">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNo"
                    :page-sizes="[8, 16, 24, 32]"
                    :page-size="pageSize"
                    background
                    layout="prev, pager, next"
                    :total=this.totalCount>
            </el-pagination>
        </el-footer>
        <!--<register-dialog v-on:refresh="refresh"></register-dialog>-->
        <personal-data-info-dialog></personal-data-info-dialog>
        <personal-data-pre-dialog></personal-data-pre-dialog>
        <es-service-dialog></es-service-dialog>
    </el-container>

</template>

<script>

    import  personalDataCard from '../space/personalDataCard.vue'
    import  personalDataInfoDialog  from'../space/personalDataInfoDialog.vue'
    import  personalDataPreDialog from '../space/personalDataPreDialog.vue'
    import  esServiceDialog from '../space/esServiceDialog'
    export default {
        name: "personalModel",
        components: {
            personalDataCard,
            personalDataInfoDialog,
            personalDataPreDialog,
            esServiceDialog
        },
        data() {
            return {
                fileList: [],
                totalCount: 0,
                pageSize: 8,
                pageNo: 1,
                cardsData: {},
            };
        },
        computed: {
            fitContent() {
                if (window.screen.height >= 1000) {
                    return 'longDataset'
                } else {
                    return 'shortDataset'
                }
            }
        },
        watch: {
            pageSize() {
                this.getModel();
            },
            pageNo() {
                this.getModel();
            }
        },
        methods: {
            handleSizeChange(val) {
                this.pageSize = val;
                this.refresh();
            },
            handleCurrentChange(val) {
                this.pageNo = val;
                this.refresh();
            },

            refresh() {
                this.cardsData = null;
                this.getPersonalData();
            },

            getPersonalData() {
                let that = this;
                // let url = 'http://192.168.1.5:9000/dbfg/parallel/get?pageSize=' + this.pageSize + '&pageNo=' + this.pageNo;
                this.$axios.get(that.$URL.datasetListFinishPublicUrl+that.pageSize+"&pageNo="+that.pageNo).then(res => {
                    if (res.code === 200) {
                        that.cardsData = res.body.result;
                        // console.log(typeof(that.cardsData));
                        that.totalCount = res.body.totalCount;
                    } else {
                        that.$message({
                            type: 'warning',
                            message: res.data.message
                        })
                    }
                }).catch(function (error) {
                    console.log(error);
                    that.$message({
                        type: 'warning',
                        message: '个人数据获取失败！'
                    })
                })
            }
        },
        created() {
            this.getPersonalData();
        }
    }
</script>

<style >
    .longDataset {
        min-height: 900px;
    }

    .shortDataset {
        min-height: 300px;
    }


</style>